<template>
  <div>
    <div class="container">
      <div class="originalContainer">
        <el-image
          style="width: 100%; height: 100%"
          :src="originalImage"
          fit="contain"
        >
        </el-image>
        <div class="footer">
          <div @mousedown="onMousedown" :style="block" class="block">
            <img
              @mousemove.prevent
              @mousedown.prevent
              class="right-icon"
              src="../../static/img/silder.png"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="sliderContainer" :style="sliderContainer">
        <el-image
          style="width: 100%; height: 100%"
          :src="sliderImage"
          fit="contain"
        >
        </el-image>
      </div>
    </div>
  </div>
</template>

<script>
import { pullCaptcha,checkCaptcha } from "../../api/index.js";

export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      x: 0,
      // 移动的距离
      moveX: 0,
      // 移动的最大值
      moveMaxX: 0,
      sliderCaptch: {
        uuid: "",
        originalImage: "",
        sliderImage: "",
        x: "",
        y: "",
      },
      sliderImage: undefined,
      originalImage: undefined,
      originalSize: {
        width: 0,
        height: 0,
      },
      sliderSize: {
        width: 0,
        height: 0,
      },
      sliderContainer: {
        width: "0px",
        margin: "0px",
        left: "0px",
      },
      block: {
        left: "0px",
      },
    };
  },
  computed: {},
  watch: {},
  methods: {
    getImgSize(url) {
      return new Promise((resolve, reject) => {
        let imgObj = new Image();
        imgObj.src = url;
        imgObj.onload = () => {
          resolve({
            width: imgObj.width,
            height: imgObj.height,
          });
        };
      });
    },
    getCaptcha() {
      pullCaptcha().then((res) => {
        this.sliderCaptch = res.data;
        this.sliderImage =
          "data:image/png;base64," + this.sliderCaptch.sliderImage;
        this.originalImage =
          "data:image/png;base64," + this.sliderCaptch.originalImage;

        this.getImgSize(this.originalImage).then((res) => {
          this.originalSize = res;
          this.getImgSize(this.sliderImage)
            .then((res) => {
              this.sliderSize = res;
            })
            .then(() => {
              console.log(this.originalSize.width);
              console.log(this.sliderSize.width);
              let o = this.originalSize.width;
              let s = this.sliderSize.width;
              let size = (400 / o) * s;
              console.log(size);
              this.$data.sliderContainer.width = size + "px";

              this.$data.sliderContainer.margin =
                this.sliderCaptch.y + "px auto auto 0px";

              this.moveMaxX = 400 - size;
            });
        });
      });
    },
    refresh() {
      this.sliderImage = undefined;
      this.originalImage = undefined;
      this.sliderCaptch = {
        uuid: "",
        originalImage: "",
        sliderImage: "",
        x: "",
        y: "",
      };
      this.x = 0,
      this.moveX = 0,
      this.moveMaxX = 0,
      this.getCaptcha();
    },
    onMousedown(e) {
      this.x = e.pageX;
      window.addEventListener("mousemove", this.onMove);
      window.addEventListener("mouseup", this.onMouseup);
    },
    // 移动事件
    onMove(e) {
      this.moveX = e.pageX - this.x;
      if (this.moveX <= 0) {
        this.setNodesStyle(0);
      } else if (this.moveX >= this.moveMaxX) {
        this.setNodesStyle(this.moveMaxX);
      } else {
        this.setNodesStyle(this.moveX);
      }
    },
    // 鼠标抬起事件
    onMouseup() {
      window.removeEventListener("mousemove", this.onMove);
      this.sliderCaptch.originalImage="";
      this.sliderCaptch.sliderImage="";
      this.sliderCaptch.x=this.moveX;
      checkCaptcha(this.sliderCaptch).then(res=>{
        if(res.data == true){
          this.$message.success("验证成功")
        }else{
          this.setNodesStyle(0);
          this.$message.error("验证失败")
          this.refresh();
        }
      })
    },
    // 设置标签的样式
    setNodesStyle(val) {
      this.$data.sliderContainer.left = val + "px";
      this.$data.block.left = val + "px";
    },
  },
  created() {},
  mounted() {
    this.getCaptcha();
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style scoped>
.container {
  position: relative;
  user-select: none;
}
.container .originalContainer {
  width: 400px;
  height: 248px;
  position: absolute;
  z-index: 9;
}
.container .sliderContainer {
  position: absolute;
  z-index: 10;
}
.footer {
  height: 66px;
  border: 1px solid #e4e7eb;
  background-color: #f7f9fa;
  line-height: 66px;
  position: relative;
}
.footer .block {
  position: absolute;
  left: 0;
  background: #fff;
  cursor: pointer;
  z-index: 9;
}
</style>